<div style="padding-top: 15px; padding-bottom: 15px;">
	<div class="container">
		<a routerLink="/learn" class="btn btn-outline-dark" style="margin-top: 5px;">Back</a>
		<h2>Editor basics</h2>
		<h3>Editor UI Layout</h3>
		<p>The nunuStudio editor is where applications are developed it provides tools for creating and editing objects inside the 3D world. If you have ever worked with another similar frameworks (unity, playcanvas, godot, etc) or with 3D modeling software (blender, maya, cinema4d, etc) some of the concepts bellow might be already familiar to you.</p>
		<p>Objects are organized in a tree structure (visible on the red area bellow), each object has childrens, that inherit the parent object position, scale and rotation. If a parent object is moved the children object is moved with it.</p>
		<p>Objects can be selected on the object explorer with mouse left click, when a object is selected the object panel (in blue), is filled with data regarding that object. In the object panel its possible to manually change every attribute of an object (position, name, color, etc).</p>
		<img class="img-big" src="assets/learn/basics/basics/layout.png"/>
		<p>The left side of the window is used to choose tools and add objects to the scene, tools are used to change objects attributes using the mouse, the following tools are available</p>
		<img class="img-small" src="assets/learn/basics/basics/tools.png"/>
		<ul>
		<li><p>Selection tool, selects objects with mouse left click, objects can also be selected by double clicking on then (even if the selection tool is not active)</p></li>
		<li><p>Move tool, used to move objects</p></li>
		<li><p>Resize tool, used to resize objects</p></li>
		<li><p>Rotate tool, used to rotate objects</p></li>
		</ul>

		<p>Bellow the tool selection, there is the object add zone, where its possible to select and add objects to the scene currently selected on the object explorer. When dragging the mouse over each option a new box appears showing objects for each category available.</p>
		<p>The resource explorer zone (in green), is used to manage all available resources (images, videos, fonts, etc), import new resources into the project (clicking on the import menu or simply by dragging them into the resource explorer) or even export resources from the project to the host system.</p>

		<h3>Navigating inside the scene</h3>
		<p>The mouse is used to move the camera inside the scene editor. There are two modes of navigation available, by default the Free navigation mode is enabled.</p>
		<ul>
		<li><p>To rotate the camera press the mouse left button and move the mouse around (the camera moves similarly to how a camera moves in a FPS game).</p></li>
		<li><p>To move the camera press the mouse right button and move the mouse</p></li>
		<li><p>To move vertically press the mouse middle button and move the mouse up and down</p></li>
		<li><p>To approach the camera use the mouse scrolling wheel, or pinch with your fingers if you are using a trackpad.</p></li>
		</ul>

		<h3>Adding a object</h3>
		<p>To add your first object to the scene (lets use as example a sphere) move the mouse to the 5th icon in left side bar, and select the sphere icon using the mouse left button.</p>
		<p>Now select the added object with the selection tool and after that choose the move tool and try to move the added object aroud.</p>
		<img class="img-big" src="assets/learn/basics/basics/add.png"/>

		<h3>Editing objects</h3>
		<p>After adding an object to the editor we can change its attributes, all objects in nunuStudio have a name, position, rotation and scale.</p>
		<p>To select an object you can select the Selection tool in the right side bar and click on top of the object in the scene editor area, alternatively you can also click on the object in the object explorer.</p>
		<p>When an object is selected, on the bottom left of there is a list of attributes that can be changed. Different types of object will have different attributes.</p>
		<img class="img-small" src="assets/learn/basics/basics/panel.png"/>

		<h3>Resources</h3>
		<p>Objects can have resources attached to them, resources can be images, video, textures, animations, etc. On the bottom of the screen we have the resource explorer than can be used to manage resources in our project.</p>
		<p>Also on the resource explorer there is a menu to create and import external resources into the project. Resources can also be imported from external sources during runtime, as we will see later on next tutorials.</p>
		<img class="img-normal" src="assets/learn/basics/basics/resources.png"/>

		<h3>Runnning the program</h3>
		<p>To test the program press the run button on the top bar, or press the F5 key, to stop it press the stop button or press the F5 again.</p>
	</div>
</div>
